<template>
  <div>
    <a-back-top/>
    <home-header :list="data.cities"></home-header>
    <home-swiper :list="data.swiperList"></home-swiper>
    <home-icons :list="data.iconList"></home-icons>
    <home-recommend :list="data.recommendList"></home-recommend>
    <home-weekend :list="data.weekendList"></home-weekend>
    <User style="position: fixed;bottom:10px;left: 10px;z-index: 100"></User>
    <!--    <div>test</div>-->
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'
import HomeWeekend from './components/weekend'
import User from "@/pages/User/User";
import axios from 'axios'
import {useStore} from 'vuex'
import {reactive, onMounted} from "vue";
import store from "@/store"

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
    User
  },
  setup() {
    const data = reactive({
      lastCity: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      cities: []
    })
    const city = useStore().state.city;

    // async function getHomeInfo() {
    //   let res = await axios.get('/api/index.json?city=' + city)
    //   res = res.data
    //   if (res.ret && res.data) {
    //     const result = res.data
    //     // data.swiperList = result.swiperList
    //     // data.iconList = result.iconList
    //     // data.recommendList = result.recommendList
    //     // data.weekendList = result.weekendList
    //   }
    // }

    //轮播图数据获取
    async function getSwiper() {
      // console.log('111')
      let res = await axios.get('http://192.168.10.73:8880/banner/list')
      // console.log(res)
      const result = res.data
      if (result.status === 10000) {
        data.swiperList = result.content;
      }
    }

    //图标区数据获取
    async function getIcons() {
      // console.log('111')
      let res = await axios.get('http://192.168.10.73:8880/icon/list')
      // console.log(res)
      const result = res.data
      if (result.status === 10000) {
        data.iconList = result.content;
      }
    }

    //推荐区数据获取
    async function getRecommend() {
      // console.log('111')
      let res = await axios.get('http://192.168.10.73:8880/recommend/list')
      // console.log(res)
      const result = res.data
      if (result.status === 10000) {
        data.recommendList = result.content;
      }
    }

    //精选区数据获取
    async function getWeekend() {
      // console.log('111')
      let res = await axios.get('http://192.168.10.73:8880/choiceness/list')
      // console.log(res)
      const result = res.data
      if (result.status === 10000) {
        data.weekendList = result.content
      }
    }

    // async function getCities() {
    //   // console.log('111')
    //   let res = await axios.get('http://192.168.10.73:8880/city/list')
    //   // console.log(res)
    //   const result = res.data
    //   if (result.status === 10000) {
    //     data.cities = result.content
    //   }
    // }

    onMounted(() => {
      data.lastCity = city
      // getHomeInfo();
      getSwiper();
      getIcons();
      getRecommend();
      getWeekend();
      // getCities();
      // console.log(store)
    })

    return {data}
  }
}
</script>

<style scoped>
.home {
  font-size: 50px;
}
</style>
